vue-cli 3.0配置webpack目录别名alias
2018.04.08
陈晓勉
vue
 热度
℃
最近用vue脚手架新建工程的时候,发现vue-cli
提供的是3.0.0-beta.6
版本,安装完成之后也找不到config
、build
等目录,不懂要从哪里入手配置别名alias
看了下官方文档,简化成使用vue.config.js
来配置项目,一路找到了webpack
这一项,发现它可以使用了webpack-chain链式API的调用方式,简化了对webpack配置的修改。
安装
npm install -g @vue/cli # or yarn global add @vue/cli
vue create my-project
|
启动
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }
|
配置
在根目录新建vue.config.js
const path = require('path'); function resolve (dir) { return path.join(__dirname, dir) } module.exports = { lintOnSave: true, chainWebpack: (config)=>{ config.resolve.alias .set('@$', resolve('src')) .set('assets',resolve('src/assets')) .set('components',resolve('src/components')) .set('layout',resolve('src/layout')) .set('base',resolve('src/base')) .set('static',resolve('src/static')) } }
|
参考
vue-cli configuration
webpack-chain
谢谢您的品读,此处抛砖引玉,希望大家共同探讨学习。